<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTML5 accessibility</title>
<style type="text/css">
	body

	{
		font: arial, Verdana, helvetica, sans-serif;
		color: #333;
		background: #ffffff;
		padding: 0 1em;


	}

	caption {text-align:left;font-weight:bold;font-size:large}

	h1 { 
	color: #630;
font-size: 300%;}



	table

	{

		border-collapse: collapse;

		border: 1px solid #630;

		font: normal 90% arial, Verdana, helvetica, sans-serif;
	}



	th, td

	{

		text-align: left;

		vertical-align: top;

		padding: 0.3em;

		border: 1px solid #630;

	}

	th {font-size:150%;}
	td {font-size:130%;}
	td p {margin:0 0 0 0;}
	thead th, thead td

	{

		font-weight: bold;

		text-align: center;

	}

	td span {border: 2px solid #9acd32;display:inline-block;padding:2px;}
	span:focus {background:#f5f5f5;border: 2px solid #a0522d;}
	/*td:focus {background:#f5f5f5;border: 2px solid #a0522d;}*/
	caption {text-align:left}


	td.support {background:#90ee90;}
	td.partial {background:#eee8aa;}
	td.nosupport{background:#ffb6c1;}


	td p.note{border: 1px dashed red;padding: 5px;margin-top:5px;background:#FFFFFF}

	td ul  {padding-left:12px}
	/*	img {border: 1px solid #630;}*/
	.test {border: 1px solid #666666;padding:4px;margin-top:15px;background:#FFFFCC}

	h1, th {
		font-family: "Cooper Black";
	}
	
		h2 {
		font-family: "Cooper Black";
		
		font-size:200%;
	}
	
	p, li {font-family: arial}
	
	h2 {
	color: #008000;
}

#float {float:right;}

.nvda { border:1px #060 solid; font-size: 80%;padding:5px;}

#banner {float:left; }

#subheader {clear:both}
</style>
 
</head>

<body>

    <header role="banner">
      
      <h1 id="banner">HTML5 accessibility</h1> <div id="float">
        <p class="nvda">Use and <a href="http://www.nvaccess.org/wiki/Donate">support</a> <a href="http://www.nvda-project.org/"><abbr title="NonVisual Desktop Access ">NVDA</abbr></a> the open source screen reader for Windows.</p>
      <p class="nvda">HTML5accessibility.com <a href="http://www.paciellogroup.com">developed by TPG</a> <em>your accessibility partner.</em></p>  </div>
      <h2 id="subheader">a work in progress:<br>
      October 2010 </h2>
      <ul>
        <li>Also on this site: <a href="index-aria.html">HTML5 accessibility support work arounds</a>.</li>
        <li>Elsewhere 
          <ul>
            <li>French version: <a href="http://www.temesis.com/html5accessibility/" lang="fr" hreflang="fr">L'accessibilité d'HTML5</a></li>
            <li> Italian version: <a href="http://webaccessibile.org/articoli/accessibilita-di-html5/" lang="it" hreflang="it">Accessibilità di HTML5</a></li>
          </ul>
        </li>
      </ul>
    </header>
 
<div role="main">
  <p>This site is  a resource to provide information about which <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> user interface features are accessibility supported in browsers, making them usable by people who rely upon assistive technology (AT) to use the web.</p>
  <p>It is not intended to dissuade developers from using <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> features. Sometimes there are better choices, sometimes developers have to add a little extra to make the feature useful or usable, and other times features have simply not been implementedby any browser or only by browsers that do not yet support assistive technologies. As a consequence it may not yet be practical to use a particular <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> feature. Example <a href="index-aria.html">work arounds</a> for lack of implemenation or lack of accessible implemention are linked from the <a href="index-aria.html">Solutions page</a>.</p>
  <p>The information in the support table will be updated on a monthly basis, to keep up with support improvements made in browsers as new versions are released.</p>
  <h3>Table Legend &amp; notes:</h3>
  <ul>
    <li><img src="images/cross.png" width="16" height="16" alt=""> &quot;not supported&quot; means the feature is implemented by the browser, but required accessibility support is not implemented.</li>
    <li><img src="images/tick.png" width="16" height="16" alt=""><img src="images/cross.png" width="16" height="16" alt=""> &quot;partially supported&quot; means the feature is implemented and accessibility support is partially implemented.</li>
    <li><img src="images/cross.gif" width="16" height="16" alt=""> &quot;not implemented&quot; means the feature has not yet been implemented in the browser.</li>
    <li><img src="images/tick.png" width="16" height="16" alt=""> &quot;supported&quot; means that the browser exposes feature information via an accessibility API and if the feature is interactive it can be operated using a range of input device types.</li>
    <li>The 'notes' cell of each row provides further information about browser support.</li>
    <li>A <a href="http://www.html5accessibility.com/html5elements/">test page</a> was used to test the support in each browser.</li>
    <li>The following tools were used to test the <a href="http://dev.w3.org/html5/spec/spec.html">HTML5</a> feature information being exposed in browsers to accessibility APIs:
      <ul>
        <li><A href="http://www.paciellogroup.com/blog/?p=635">Aviewer</A> (free desktop   application for windows )
        </li>
        <li><A href="https://addons.mozilla.org/en-US/firefox/addon/6622/">Dom   Inspector</A> (free Firefox extension)   
        </li>
        <li><A href="http://msdn.microsoft.com/en-us/library/dd318521%28v=vs.85%29.aspx">Inspect.exe</A> (free desktop application for windows available as part of the Windows SDK)   
        </li>
        <li><A href="http://accessibility.linuxfoundation.org/a11yweb/util/accprobe/">Accprobe</A> (free   open source desktop application)   
        </li>
        <li><A href="http://developer.apple.com/library/mac/#documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTesting/OSXAXTestingApps.html">Accessibility   Inspector</A> (free Mac appplication) </li>
      </ul>
    </li>
    <li>Keyboard support was tested by attempting to use interactive controls using the keyboard.</li>
    <li>An ? indicates information is yet to be provided.</li>
    <li>Please report any inaccuracies to <a href="mailto:sfaulkner@paciellogroup.com">sfaulkner@paciellogroup.com</a>.</li>
  </ul>
  <p>&nbsp;</p>
  <table width="96%" border="1">
    <caption>
    HTML5 feature accessibility support in Windows Browsers
</caption>
    <tr>
      <th width="365">new HTML5 elements</th>
      <th width="75" scope="col"><p><img src="images/chrome.png" alt="" width="62" height="61" border="0"></p>
      <p>Chrome 6</p></th>
      <th width="90" scope="col"><p><img src="images/firefox.png" alt="" width="62" height="61" border="0"></p>
      <p>Firefox 4.0b6</p></th>
      <th width="61" scope="col"><p><img src="images/ie.png" alt="" width="62" height="61" border="0"></p>
      <p>IE 9</p></th>
      <th width="84" scope="col"><p><img src="images/opera.png" alt="" width="62" height="61" border="0"></p>
      <p>Opera 10.62</p></th>
      <th width="76" scope="col"><p><img src="images/safari.png" alt="" width="62" height="61" border="0"></p>
      <p>Safari 5</p></th>
      <th width="359" scope="col">Notes</th>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-article-element">article</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="support"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to <abbr title="assistive technology">AT</abbr> as a div element</p>
      <p><strong>Firefox:</strong> exposes element name as an <a href="http://www.linuxfoundation.org/collaborate/workgroups/accessibility/iaccessible2">IAccessible2</a> (IA2)object attribute</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-aside-element">aside</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="support"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a div element</p>
      <p><strong>Firefox:</strong> exposes element name as an IAccessible2 object attribute</p></td>
    </tr>
    <tr>
      <td><a href="http://dev.w3.org/html5/spec/video.html#audio"><code>audio</code></a> element</td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p><strong>Firefox:</strong> </p>
        <ul>
          <li>has an issue with the inbuilt slider control values being announced by some AT as audio plays and the slider values update.</li>
          <li>Exposes element name as an IA2 object attribute</li>
        </ul>
        <p><strong>Opera</strong>: has good keyboard support, but no AT support.</p>
        <p>&nbsp;</p>
        <p><strong>IE 9</strong>: has partial keyboard support (play/pause) and some information exposed via   accessibility APIs (accessible name=video and audio itself is a button). </p>
      <p>Refer to: <a href="http://www.robwinters.co.uk/2010/08/31/keyboard-access-for-html5-video/" rel="bookmark" title="Permanent Link to Keyboard access for HTML5 video">Keyboard access for HTML5 video</a> for more information.</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/the-canvas-element.html#the-canvas-element">canvas</a></code> element</td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p><strong>Internet Explorer 9: </strong>suppports the accessible canvas element sub-DOM, but not  caret or focus exposure.</p>
      <p><strong>Chrome 6</strong>: interactive elements  canvas sub-DOM are navigable and can be activated, but no information exposed via   accessibility APIs.</p></td>
    </tr>
    <!--<tr>
    <td><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-command">command</a> element</td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td>not implemented</td>
  </tr>-->
    <tr>
      <td><code><a href="http://www.w3.org/TR/html5/forms.html#the-datalist-element">datalist</a></code> element </td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><strong>Opera</strong>: keyboard accessible.</td>
    </tr>
    <tr>
      <td><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-details-element"><code>details</code></a> element</td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Currently provides the same amount of semantic information to AT as a div element.</td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/grouping-content.html#the-figcaption-element">figcaption</a></code> element</td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute, but does not expose the relation between the <code>figure</code> and <code>figcaption</code> elements as an accessible relation.</p></td>
    </tr>
    <tr>
      <td><code><A href="http://dev.w3.org/html5/spec/grouping-content.html#the-figure-element">figure</A></code> element</td>
      <td><img src="images/cross.png" alt="not supported" width="16" height="16" border="0"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute, but does not expose the relation between the <code>figure</code> and <code>figcaption</code> elements as an accessible relation.</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-footer-element">footer</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="support"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-header-element">header</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="support"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-hgroup-element">hgroup</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute, but the accessible role  is incorrect. (paragraph - should be heading with level of highest level child heading element)</p></td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/number-state.html#color-state">color</a><code> <a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>not implemented</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#date-state" title="attr-input-type-date">Date</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><strong>Opera</strong>: has keyboard interaction but it's buggy: pressing enter when the input has focus displays the date picker, pressing tab moves the focus to the month field, but also causes the date picker to become disconnected from the input.</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#date-and-time-state" title="attr-input-type-datetime">Date and Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Opera has keyboard interaction but it's buggy.</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#local-date-and-time-state" title="attr-input-type-datetime-local">Local Date and Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code> </td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Opera has keyboard interaction but it's buggy.</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#e-mail-state" title="attr-input-type-email">E-mail</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>?</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#month-state" title="attr-input-type-month">Month</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><strong>Opera</strong>: has keyboard interaction but it's buggy.</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#number-state" title="attr-input-type-number">Number</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><strong>Opera</strong>: keyboard accessible.</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#range-state" title="attr-input-type-range">Range</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><strong>Chrome:</strong> correct role, no keyboard support</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#text-state-and-search-state" title="attr-input-type-search">Search</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>?</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#telephone-state" title="attr-input-type-tel">Telephone</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code> </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>?</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#time-state" title="attr-input-type-time">Time</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><strong>Opera</strong>: keyboard accessible.</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#url-state" title="attr-input-type-url">URL</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code> </td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>?</td>
    </tr>
    <tr>
      <td><a href="http://www.w3.org/TR/html5/forms.html#week-state" title="attr-input-type-week">Week</a> <code><a href="http://www.w3.org/TR/html5/forms.html#the-input-element">input</a></code></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><strong>Opera: </strong>has keyboard interaction but it's funky.</td>
    </tr>
    <!--<tr>
    <td><code><A href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-mark-element">mark</A></code></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td>Currently provides the same amount of semantic information to AT as a span element</td>
  </tr>-->
    <tr>
      <td><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> &gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menu-state" title="context menu state">context menu</a></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>not implemented </td>
    </tr>
    <tr>
      <td><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code>&gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#list-state" title="list state">list</a></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>not implemented </td>
    </tr>
    <tr>
      <td><code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> &gt; <a href="http://www.w3.org/TR/html5/interactive-elements.html#toolbar-state" title="toolbar state">toolbar</a></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>not implemented </td>
    </tr>
    <!--<tr>
    <td>descendant element (type=&quot;checkbox&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code>  type=&quot;list&quot; </td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <td>descendant element (type=&quot;command&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> type=&quot;list&quot; </td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td>not implemented </td>
  </tr>
  <tr>
    <td>descendant element (type=&quot;radio&quot;) of a <code><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">menu</a></code> type=&quot;list&quot; </td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td>not implemented </td>
  </tr>-->
    <tr>
      <td><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-meter-element">meter</a> element</td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-nav-element">nav</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="support"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/the-button-element.html#the-output-element">output</a></code> element</td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</td>
    </tr>
    <tr>
      <td><code><a href="http://www.w3.org/TR/html5/forms.html#the-progress-element">progress</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/sections.html#the-section-element">section</a></code> element </td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="support"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p>Currently provides the same amount of semantic information to AT as a div element.</p>
      <p><strong>Firefox:</strong> exposes element name as an IA2 object attribute</p></td>
    </tr>
    <tr>
      <td><code><a href="http://dev.w3.org/html5/spec/interactive-elements.html#the-summary-element">summary</a></code> element</td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
      <td>Currently provides the same amount of semantic information to AT as a <code>div</code> element.</td>
    </tr>
    <!--<tr>
    <td><code><A href="http://dev.w3.org/html5/spec/text-level-semantics.html#the-time-element">time</A></code> element</td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td>Currently provides the same amount of semantic information to AT as a span element</td>
  </tr>-->
    <tr>
      <td><a href="http://dev.w3.org/html5/spec/video.html"><code>video</code></a> element</td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/tick.png" width="16" height="16" alt="partial support"><img src="images/cross.png" width="16" height="16" alt=""></td>
      <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
      <td><p><strong>Firefox:</strong> has an issue with the inbuilt slider control values being announced by some AT as audio plays and the slider values update.</p>
        <p><strong>Opera</strong>: has good keyboard support, but no AT support.</p>
        <p><strong>IE 9</strong>: has partial keyboard support (play/pause) and some information exposed via   accessibility APIs (accessible name=video and video element  is exposed as a button). </p>
      <p>Refer to: <a href="http://www.robwinters.co.uk/2010/08/31/keyboard-access-for-html5-video/" rel="bookmark" title="Permanent Link to Keyboard access for HTML5 video">Keyboard access for HTML5 video</a> for more information about keyboard access.</p></td>
    </tr>
  </table>
</div>
<footer role="contentinfo"><p><A href="http://creativecommons.org/licenses/by-sa/2.0/uk/" rel="license"><IMG alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/2.0/uk/88x31.png"></A><BR>
This <SPAN rel="dc:type" href="http://purl.org/dc/dcmitype/Text" xmlns:dc="http://purl.org/dc/elements/1.1/">work</SPAN> is licenced under a <A href="http://creativecommons.org/licenses/by-sa/2.0/uk/" rel="license">Creative   Commons Licence</A>.</p>
<p>Updated: 18/10/2010</p></footer>
<!--<table width="96%" border="1">
<caption>
  HTML5 attribute accessibility support in Windows Browsers
</caption>
  <tr>
    <th width="365">new HTML5 attributes</th>
    <th width="75" scope="col"><p><img src="images/chrome.png" alt="chrome" width="62" height="61" border="0"></p>
      <p>Chrome 6</p></th>
    <th width="90" scope="col"><p><img src="images/firefox.png" alt="Firefox" width="62" height="61" border="0"></p>
      <p>Firefox 4</p></th>
    <th width="61" scope="col"><p><img src="images/ie.png" alt="Internet Explorer" width="62" height="61" border="0"></p>
      <p>IE 9</p></th>
    <th width="84" scope="col"><p><img src="images/opera.png" alt="" width="62" height="61" border="0"></p>
      <p>Opera 10.62</p></th>
    <th width="76" scope="col"><p><img src="images/safari.png" alt="Safari" width="62" height="61" border="0"></p>
      <p>Safari 5</p></th>
    <th width="359" scope="col">Notes</th>
  </tr>
  <tr>
    <td><code><a href="http://dev.w3.org/html5/spec/dnd.html#the-draggable-attribute">draggable</a></code> attribute</td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-placeholder-attribute"><code>placeholder</code></a> attribute</td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.gif" width="16" height="16" alt="not implemented"></td>
    <td><img src="images/cross.png" width="16" height="16" alt="not supported"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>-->


</body>
</html>
